<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"
          integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"
            integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo"
            crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"
            integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1"
            crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"
            integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM"
            crossorigin="anonymous"></script>
</head>
<body>
<div class="container">
    <div class="col">
        <form action="/filterDisplay/" method="post">
            {% csrf_token %}
            <table class="table table-hover">
                <tbody>
                <tr>
                    <th>品牌</th>
                    <td>
                        <select class="custom-select" name="Brand">
                            <option selected value="">选择品牌</option>
                            <option value="三星">三星</option>
                            <option value="HKC">HKC</option>
                            <option value="AOC">AOC</option>
                            <option value="优派">优派</option>
                            <option value="明基">明基</option>
                            <option value="飞利浦">飞利浦</option>
                            <option value="蚂蚁电竞">蚂蚁电竞</option>
                            <option value="航嘉">航嘉</option>
                            <option value="ZOWIE GEAR">ZOWIE GEAR</option>
                            <option value="泰坦军团">泰坦军团</option>
                            <option value="INNOCN">INNOCN</option>
                            <option value="索尼">索尼</option>
                            <option value="华硕">华硕</option>
                            <option value="LG">LG</option>
                            <option value="长城">长城</option>
                            <option value="SANC">SANC</option>
                            <option value="NEC">NEC</option>
                            <option value="剑齿虎">剑齿虎</option>
                            <option value="KOIOS">KOIOS</option>
                            <option value="MAXHUB">MAXHUB</option>
                            <option value="现代">现代</option>
                            <option value="冠微">冠微</option>
                            <option value="TCL">TCL</option>
                            <option value="理想">理想</option>
                            <option value="美格">美格</option>
                            <option value="Acer宏碁">Acer宏碁</option>
                            <option value="瀚视奇">瀚视奇</option>
                            <option value="新境界">新境界</option>
                            <option value="WESCOM">WESCOM</option>
                            <option value="戴尔">戴尔</option>
                            <option value="雕塑家">雕塑家</option>
                            <option value="奇美">奇美</option>
                            <option value="红米">红米</option>
                            <option value="康冠">康冠</option>
                            <option value="联想">联想</option>
                            <option value="华为">华为</option>
                            <option value="第十类">第十类</option>
                            <option value="小米">小米</option>
                            <option value="msi微星">msi微星</option>
                            <option value="惠普">惠普</option>
                            <option value="HYINGDA">HYINGDA</option>
                            <option value="酷开">酷开</option>
                            <option value="艺卓">艺卓</option>
                            <option value="ZEOL">ZEOL</option>
                            <option value="创维">创维</option>
                            <option value="松人">松人</option>
                            <option value="苹果">苹果</option>
                            <option value="奈普">奈普</option>
                            <option value="夏新">夏新</option>
                            <option value="唯冠科技">唯冠科技</option>
                            <option value="外星人">外星人</option>
                            <option value="科睿">科睿</option>
                            <option value="熊猫">熊猫</option>
                            <option value="来酷">来酷</option>
                            <option value="大水牛">大水牛</option>
                            <option value="雷神">雷神</option>
                            <option value="技嘉">技嘉</option>
                            <option value="方正">方正</option>
                            <option value="EHOMEWEI">EHOMEWEI</option>
                            <option value="康佳">康佳</option>
                            <option value="铁幕">铁幕</option>
                            <option value="易美逊">易美逊</option>
                            <option value="游戏悍将">游戏悍将</option>
                            <option value="LAPAELO">LAPAELO</option>
                            <option value="海信">海信</option>
                            <option value="京东方">京东方</option>
                            <option value="铭速">铭速</option>
                            <option value="金正">金正</option>
                            <option value="惠浦">惠浦</option>
                            <option value="攀升">攀升</option>
                            <option value="IPASON">IPASON</option>
                            <option value="惠冠">惠冠</option>
                            <option value="JOHNWILL">JOHNWILL</option>
                            <option value="安美特">安美特</option>
                            <option value="HSO">HSO</option>
                            <option value="灵蛇">灵蛇</option>
                        </select>
                    </td>
                </tr>

                <tr>
                    <th>最佳分辨率</th>
                    <td>
                        <select class="custom-select" name="Resolution">
                            <option selected value="">选择最佳分辨率</option>
                            <option value="3840x2160">3840x2160</option>
                            <option value="3440x1440">3440x1440</option>
                            <option value="2560x1440">2560x1440</option>
                            <option value="2560x1080">2560x1080</option>
                            <option value="1920x1080">1920x1080</option>
                        </select>
                    </td>
                </tr>
                </tbody>
                <tr>
                    <td></td>
                    <th>
                        <button type="submit" class="btn btn-primary">筛选</button>
                    </th>
                </tr>

            </table>
        </form>
    </div>
    <div class="col">
        {% for case in cases %}
        <div class="card">
            <div class="card-body">
                <h5 class="card-title">{{case.Name}}</h5>
                <p class="card-text">最佳分辨率:{{case.Resolution}}</p>
                <p class="card-text">价格:￥{{case.Price}}</p>
                <div class="btn-group" role="group" aria-label="Basic example">
                    <form action="/configReturnDisplay/" method="post">
                        {% csrf_token %}
                        <input name="id" hidden="hidden" value="{{case.Name}}">
                        <button type="submit" class="btn btn-primary">添加到配置单</button>
                    </form>
                    <form action="/moreInfoDisplay/" method="post">
                        {% csrf_token %}
                        <input name="id" hidden="hidden" value="{{case.Name}}">
                        <button type="submit" class="btn btn-primary">详细信息</button>
                    </form>
                </div>
            </div>
        </div>
        {% endfor %}
    </div>
</div>
</body>
</html>